<template>
  <div class="back" v-if="modelValue">
    <div class="content">
      <div class="title">
        <div>
          {{stepConfig[nowStep].label}}
        </div>
        <div>
          {{ nowStep+1 }}/{{stepConfig.length}}
        </div>
        <div @click="()=>{
          emit('update:modelValue',false)
        }">
          X
        </div>
      </div>
      <div>
        <input v-model="formValue[stepConfig[nowStep].property]" v-if="stepConfig[nowStep].inputType==='input'" v-bind="stepConfig[nowStep].props"/>
        <textarea v-model="formValue[stepConfig[nowStep].property]" v-if="stepConfig[nowStep].inputType==='textarea'" v-bind="stepConfig[nowStep].props"></textarea>
        <select v-model="formValue[stepConfig[nowStep].property]" v-if="stepConfig[nowStep].inputType==='select'" v-bind="stepConfig[nowStep].props">
          <option v-for="(value, key) in stepConfig[nowStep].options" :key="value" :value="value">{{key}}</option>
        </select>
        <el-date-picker v-model="formValue[stepConfig[nowStep].property]" v-if="stepConfig[nowStep].inputType==='date'" v-bind="stepConfig[nowStep].props"></el-date-picker>
      </div>
      <div>
        <el-button @click="goNext">
          {{ nowStep === stepConfig.length-1 ? '提交' : '下一步'}}
        </el-button>
        <el-button @click="goBack">
          {{nowStep === 0 ? '取消' : '上一步'}}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>

import { ref, watchEffect } from 'vue'

const {modelValue,stepConfig} = defineProps(["modelValue","stepConfig"])
const nowStep = ref(0)
const formValue = ref({})


const emit = defineEmits(["update:modelValue","saveInfo"])
const goBack = () => {
  if(nowStep.value === 0){
    emit('update:modelValue',false)
  }
  nowStep.value--
}
const goNext = () => {
  if(nowStep.value < stepConfig.length-1){
    nowStep.value++
  }else{
    //提交
    emit('saveInfo',formValue.value)
  }

}

//监听弹窗关闭时候重置nowStep
watchEffect(()=>{
  console.log('modelValue',modelValue)
  if(!modelValue){
    nowStep.value = 0
  }
},modelValue)

watchEffect(()=>{
  let obj = {}
  stepConfig.forEach(item=>{
    console.log("item",item)
    obj[item.property] = item.value
  })
  formValue.value = obj
  console.log("formValue",formValue.value)

},stepConfig)
</script>

<style scoped>
.back{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
}
.content{
  position: absolute;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
}
.title{
  display: flex;
  justify-content: space-between;
}
</style>
